<script>
import { Table as YsTable, TableUtils } from '@/components/YS/Table'
import api from '@/api'
import treeUtils from '@/utils/tree'

export default {
  name: 'AdminRoleIndex',
  components: {
    YsTable
  },
  data () {
    return {
      tableConfig: {
        tableTitle: '角色列表',
        extend: {
          actions: {
            add: () => import('./add'),
            detail: () => import('./detail'),
            edit: () => import('./edit'),
            delete: api.admin.role.del,
            multi: api.admin.role.multi
          }
        },
        toolbars: [{
          name: 'multi',
          formatter: (t) => TableUtils.formatter.toolbars.multi({
            'field=status&value=1': <span><a-icon type="eye" />{this.__('状态设为正常')}</span>,
            'field=status&value=0': <span><a-icon type="eye-invisible" />{this.__('状态设为隐藏')}</span>
          }, t)
        }],
        // 加载数据方法 必须为 Promise 对象
        url: (params) => {
          return api.admin.role.index(params).then(response => {
            treeUtils.init(response.data.data.rows)
            response.data.data.rows = treeUtils.getTreeList(treeUtils.getTreeArray(0), 'name')
            return Promise.resolve(response)
          })
        },
        showPagination: false,
        showSearch: true,
        showRowSelection: row => { return !!row.disabled }, // 复选框 (动态渲染)
        rowKey: 'id',
        columns: [
          { title: this.__('ID'), dataIndex: 'id', width: 130 },
          { title: this.__('上级ID'), dataIndex: 'pid_original', width: 130, searchName: 'pid' },
          {
            title: this.__('名称'),
            dataIndex: 'name',
            ellipsis: true
          },
          {
            title: this.__('状态'),
            dataIndex: 'status',
            width: 130,
            searchList: {
              '1': this.__('正常'),
              '0': this.__('隐藏')
            },
            formatter: TableUtils.formatter.status
          },
          {
            title: this.__('table.operate'),
            width: 130,
            formatter: TableUtils.formatter.operate,
            buttonHandle: (button, row) => {
              switch (button.name) {
                case 'detail':
                  return true
                default:
                  return !row.disabled
              }
            }
          }
        ]
      }
    }
  },
  render () {
    return (<page-header-wrapper>
      <a-card bordered={false}>
        <ys-table config={this.tableConfig}></ys-table>
      </a-card>
    </page-header-wrapper>)
  }
}
</script>
